<style type="text/css">
    .bg {
        background: #eeeeee;
        padding-top: 48px;
        padding-bottom: 66px;
    }
    .p_d_img img{
        width: 100%;
    }
    .product_detail_footer{
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 99999999999;
        background: #fff;
        border-top: 1px solid #f0f0f0;
    }
    .p_d_pic{
        width: 64px;
        height: 64px;
        border-radius: 6px;
        margin-top: -12px;
    }
    .p_d_top{
        padding: 0 12px;
    }
    .p_d_name{
        margin:4px 0 4px 12px;
        font-size: 15px;
    }
    .p_d_price{
        font-size: 14px;
        color: red;
        margin-left: 12px;
    }
    .confirm_btn{
        display: block;
        text-align: center;
        width: 100%;
        height: 48px;
        line-height: 48px;
        background: #f60;
        color: #fff;
        margin-top: 14px;
        font-size: 16px;
    }
    .control_panel{
        padding:  20px 14px 8px 20px;
        color: #666;
        font-size: 12.6px;
        display: none;
    }
    .control_item{
        height: 30px;
        line-height: 30px;
    }
    .control_item p{
        width: 40%;
        text-align: center;
    }
    .count_panel{
        height: 28px;
        line-height: 28px;
        line-height: 28px;
    }
    .count_btn{
        width: 40px;
        background: #eeeeee;
        font-size: 14px;
    }
    .now_count{
        width: calc(100% - 80px);
        text-align: center;
        border:1px solid #a1a1a1;
    }
    .trans_msg_title{
        text-align: center;
        font-size: 12.8px;
        line-height: 40px;
        color: #999;
    }
    .trans_msg_con{
        font-size: 13px;
        color: #f60;
    }
</style>


<div class="pro_header">
    <a href="javascript:history.go(-1)" class="return_btn"></a>
    <?= $this->title ?>
    <a href="<?= url(['site/index']) ?>" class="to_home_btn"></a>
</div>


<div class="p_d_img">
    <img src="/images/da671129-31a5-4684-ad2d-9b7064d8f196.jpg">
    <img src="/images/pcdddd.jpg">
    <img src="/images/asdfasdfasd.jpg">
    <img src="/images/pdiii.png">
</div>

<div class="product_detail_footer">
    <div class="clear_fl p_d_top">
        <img class="lf p_d_pic" src="/images/fadsfdsa.jpg">
        <div class="lf">
            <p class="p_d_name">金沙石手链</p>
            <p class="p_d_price">价格￥102 赠送积分90</p>
        </div>
    </div>
    <div class="control_panel">
        <div class="control_item clear_fl">
            <span class="lf">购买数量</span>
            <p class="rt count_panel clear_fl">
                <span class="minus_btn lf count_btn"> - </span>
                <input readonly="readonly" value="1" class="lf now_count" />
                <span class="plus_btn count_btn lf"> + </span>
            </p>
        </div>
        <div class="control_item clear_fl">
            <span class="lf">商品运费</span>
            <p class="rt  clear_fl">8.00</p>
        </div>
        <div class="control_item clear_fl">
            <span class="lf">金额合计</span>
            <p class="rt  clear_fl">118.00</p>
        </div>
        <div class="control_item clear_fl">
            <span class="lf">赠送积分</span>
            <p class="rt  clear_fl">88.00</p>
        </div>
        <p class="trans_msg_title">—————————— 收货信息 ——————————</p>
        <p class="trans_msg_con">上海市-地级市-市、县级市、县-技术测试</p>
    </div>
    <a class="confirm_btn">立即购买</a>
</div>


<script type="text/javascript">
    $(function(){
        $(".confirm_btn").click(function(){
            if( $(this).hasClass("isSubmit") ){
                // 提交订单
                alert("提交订单");
                window.location.href = "<?= url(['site/shopInformation']) ?>";
            }
            // 显示详情
            $(".control_panel").show();
            $(this).html("确认订单").addClass("isSubmit");
        });

        $(".product_detail_footer").click(function(e){
            e.stopPropagation();
        });

        $("body").click(function(){
            $(".confirm_btn").html("立即购买").removeClass("isSubmit");
            $(".control_panel").hide();
        });


        $(".control_panel").on("click", ".count_btn", function(){
            var nowCount = parseFloat( $(".now_count").val() );
            if( $(this).hasClass("minus_btn") ){ //减
                if( nowCount <= 0 ){
                    return false;
                }
                nowCount --;
            }else{ // 加
                nowCount ++;
            }
            $(".now_count").val( nowCount ); 
        });
    });
</script>





